<template>
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:getStatusBarHeight()+ 'px'}" >
				
			</view>
			<view class="titleBar" 
			:style="{height:getTitleBarHeight()+ 'px',marginLeft:getLeftIconLeft()+'px'}">
				<text class="MediumTitle">劳务通</text>
			</view>
			<view class="fill" :style="{height:getNavBarHeight()+'px'}">
				<view class="titleBao">
					<view class="title">
						<uni-data-select
						      v-model="value"
						      :localdata="range"
							  placeholder="泉州"
						    ></uni-data-select>
					</view>
					<navigator url="/pages/search/search" class="search">
						<image class="icon" src="../../static/home/u1232.png" mode="aspectFill"></image>
						<text class="text">搜索岗位、店铺</text>
					</navigator>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
import { ref } from "vue";
import { getStatusBarHeight,getTitleBarHeight,getNavBarHeight,getLeftIconLeft } from "@/utils/system.js"
 
    const value = ref(0);  
    const range = ref([  
      { value: 0, text: "泉州" },  
      { value: 1, text: "开封" },  
      { value: 2, text: "阜阳" },  
    ]);  
  
  
  
	defineProps({
		title:{
			type:String,
			default:"泉州"
		}
	})
</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		height: 20vh;
		background: white;
		.statusBar{
			
		}
		.titleBar{
			.MediumTitle{
				/* #ifdef MP */
				padding: 10rpx;
				/* #endif */
				/* #ifndef MP */
				padding: 50rpx;
				/* #endif */
				display: flex;
				justify-content: center;
				align-items: baseline;
				font-size: 35rpx;
				font-weight: bold;
			}
		}
		.fill{
			padding: 40rpx 40rpx 0;
			.titleBao{
				display: flex;
				align-items: center;
				border: 1px solid #ddd;
				box-shadow: 0 0 10rpx rgba(210, 210, 210, 0.4);
				border-radius: 10rpx;
				.title{
					font-size: 20px;
					font-weight: 700;
					color: #000;
					uni-data-select{
						border: none;
					}
				}
				.search{
					width: 280rpx;
					height: 60rpx;
					margin-left: 30rpx;
					color: #999;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					.icon{
						width: 40rpx;
						height: 40rpx;
					}
					.text{
						font-size: 20rpx;
						padding-left: 10rpx;
					}
				}
			}
		}
	}
	
}
</style>